<template>
    <b-carousel
        :autoplay="false"
        with-carousel-list
        :indicator="false"
        :overlay="gallery"
        @click="switchGallery(true)"
    >
        <b-carousel-item v-for="(item, i) in items" :key="i">
            <figure class="image">
                <img :src="item.image" />
            </figure>
        </b-carousel-item>
        <span
            v-if="gallery"
            @click="switchGallery(false)"
            class="modal-close is-large"
        />
        <template #list="props">
            <b-carousel-list
                v-model="props.active"
                :data="items"
                v-bind="al"
                @switch="props.switch($event, false)"
                as-indicator
            />
        </template>
        <template #overlay>
            <div class="has-text-centered has-text-white">
                Hello, I'm an overlay!
            </div>
        </template>
    </b-carousel>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { BCarousel, BCarouselItem, BCarouselList } from "buefy";

export default defineComponent({
    components: {
        BCarousel,
        BCarouselItem,
        BCarouselList,
    },
    data() {
        return {
            gallery: false,
            al: {
                hasGrayscale: true,
                itemsToShow: 2,
                breakpoints: {
                    768: {
                        hasGrayscale: false,
                        itemsToShow: 4,
                    },
                    960: {
                        hasGrayscale: true,
                        itemsToShow: 6,
                    },
                },
            },
            items: [
                {
                    title: "Slide 1",
                    image: "https://picsum.photos/id/0/1230/500",
                },
                {
                    title: "Slide 2",
                    image: "https://picsum.photos/id/1/1230/500",
                },
                {
                    title: "Slide 3",
                    image: "https://picsum.photos/id/2/1230/500",
                },
                {
                    title: "Slide 4",
                    image: "https://picsum.photos/id/3/1230/500",
                },
                {
                    title: "Slide 5",
                    image: "https://picsum.photos/id/4/1230/500",
                },
                {
                    title: "Slide 6",
                    image: "https://picsum.photos/id/5/1230/500",
                },
                {
                    title: "Slide 7",
                    image: "https://picsum.photos/id/6/1230/500",
                },
                {
                    title: "Slide 8",
                    image: "https://picsum.photos/id/7/1230/500",
                },
            ],
        };
    },
    methods: {
        switchGallery(value: boolean) {
            this.gallery = value;
            if (value) {
                document.documentElement.classList.add("is-clipped");
            } else {
                document.documentElement.classList.remove("is-clipped");
            }
        },
    },
});
</script>
